<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>注册</title>
	<style type="text/css">
		body{
			padding: 0;
			margin: 0;
		}
		.backContainer{
			height: 756px;
			width: 100%;
			background-image: url('banner.jpg');
		}
		.container{
			margin: auto;
			position: absolute;
			top: 20%;
			left: 35%;
			height: 500px;
			width: 500px;
			background: #fff;
			box-shadow: 0px 0px 10px #304050;
			border-radius:10px;
		}
		.username ,.password,.tel,.mailbox{
			margin: 40px 50px;
		}
		.username input,.password input,.passwordAgain input,.tel input,.mailbox input{
			border-radius:25px;
			border: 1px solid #424C50;	
			height: 30px;
			width: 312px;
			font-size: 18px;
			padding-left: 12px;
			font-family: "微软雅黑";
		}
		.username input:focus,.password input:focus,.passwordAgain input:focus,.tel input:focus,.mailbox input:focus,.loginbutton button{	
			outline:none;
			border-color: #1BD1A5;
		}
		.username label,.password label,.passwordAgain label,.tel label,.mailbox label{
			font-family: "微软雅黑";
		}

		.passwordAgain{
			margin-top: 40px; 
			margin-left: 30px; 
		}


		.loginbutton button{
			background-color: #79b1d5;
			height: 40px;
			width: 380px;
			border-radius:25px;
			border: none;
			font-family: "微软雅黑";
			font-size: 20px;	
			color: #ffffff;
			margin: 0px 60px;
		}
	</style>
</head>
<body>
<div class="backContainer">
	<div class="container">
			<div class="username"><label>用户名:&nbsp;&nbsp;&nbsp;</label><input type="text" name="username"></div>
			<div class="password"><label>密&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;</label><input type="password" name="password"></div>
			<div class="passwordAgain"><label>再次输入:&nbsp;&nbsp;&nbsp;</label><input type="password" name="password">
				<p class="wrongPass" style="color:red;font-size:12px;float:right;position:relative;left:-50px"></p></div>
			<div class="tel"><label>电&nbsp;&nbsp;&nbsp;话:&nbsp;&nbsp;&nbsp;</label><input type="tel" name="tel"></div>
			<div class="mailbox"><label>邮&nbsp;&nbsp;&nbsp;箱:&nbsp;&nbsp;&nbsp;</label><input type="email" name="mailbox"></div>
			<div class="loginbutton"><button type="submit" class="loginButton">注册</button></div>
	</div>
</div>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
	$(function(){

		$('.passwordAgain input').change(function(){
				if($('.password input').val()==$('.passwordAgain input').val()){
					$('.password input').css("border-color","#424C50");
					$('.passwordAgain input').css("border-color","#424C50");
					$('.wrongPass').html("");
					//todo:在密码后添加一个对号
				}
				else{
					$('.password input').css("border-color","#ff0000");
					$('.passwordAgain input').css("border-color","#ff0000");
					$('.wrongPass').html("请核对密码输入");
				}
		});

		$('.loginbutton button').click(function(){
				
		});
		

	});
</script>
</body>
</html>